﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>电瓶车客户端</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <link rel="shortcut icon" href="/favicon.ico">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
    <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css">
    <style>
        .def_color {
            color: #3d4145;
        }

        .picWH {
            width: 1.2rem;
            height: 1.2rem
        }

        .code {
            margin-left: 1rem;
            border: 0px solid;
            /*background: #ffffff;*/
            color: red;
            width: 4rem;
            font-size: 0.5rem;
            background-color: rgba(255,255,255,0);
        }

        .bgimg {
            background-image: url('img/bgimg.png');
            background-repeat: no-repeat;
            background-size: 100% 100%;
            -moz-background-size: 100% 100%;
        }
    </style>
</head>
<body>
    <div class="page-group bgimg">
        <div class="page" id="resovle_problem">
            <!--<header class="bar bar-nav">
                <h1 class='title'>表单</h1>
            </header>-->
            <div class="content bgimg" id="el">
                <div class="item-content" style="margin-top:5rem" align="center">
                    <img src="img/logo.jpg" style="border-radius:50%;width:5.3rem;height:5.3rem" />
                </div>
                <div class="list-block" align="center">
                    <ul style="margin-top:2rem;width:17rem">
                        <!-- Text inputs -->
                        <li>
                            <div class="item-content">
                                <div class="item-media"><i class="icon icon-form-name"></i></div>
                                <div class="item-inner">
                                    <div class="item-title label">手机号</div>
                                    <div class="item-input">
                                        <input type="number" placeholder="" v-model="phone_number">
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="item-content">
                                <div class="item-media"><i class="icon icon-form-email"></i></div>
                                <div class="item-inner">
                                    <div class="item-title label">验证码</div>
                                    <div class="item-input">
                                        <input type="number" placeholder="" v-model="code">
                                    </div>
                                    <div class="item-input">
                                        <input type="button" id="btn" value="获取验证码" class="code" @click="getyzm(this)" />
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="content-block" align="center">
                    <div class="row">
                        <!--<div class="col-50"><a href="#" class="button button-big button-fill button-danger">取消</a></div>-->
                        <div class="col-100" @click="login()"><a href="#" class="button button-big button-fill button-success">登录</a></div>
                    </div>
                </div>
            </div>
        </div>
        <script type='text/javascript' src='//g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
        <script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
        <script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm-extend.min.js' charset='utf-8'></script>
        <script src="js/vue.min.js"></script>
    </div>
    <script>
        var vm = new Vue({
            el: '#el',
            data: {
                phone_number: '',
                code: '',
                countdown: 60,
                localurl: 'http://101.132.109.236:8081',
                phoneTest: /^[1][3,4,5,7,8][0-9]{9}$/
            },
            created: function () {
                localStorage.clear();
            },
            methods: {
                login: function () {
                    var act = "";
                    if (!vm.phoneTest.test(vm.phone_number)) {
                        $.toast("请输入正确的手机号");
                        return;
                    }
                    else {
                        act += 'phone_number=' + vm.phone_number;
                        if (vm.code == '') {
                            $.toast("请输入验证码");
                            return;
                        }
                        else {
                            act += '&code=' + vm.code;
                        }
                    }
                    $.ajax({
                        data: '',
                        dataType: "json",
                        url: '' + vm.localurl + '/CarUser/Login?' + act,//" + yewupath + "
                        type: "POST",
                        contentType: "application/json; charset=utf-8",
                        success: function (data) {
                            if (data.err) {
                                $.toast(data.err);
                            }
                            else {
                                $.toast("登录成功");
                                setTimeout(function () {
                                    window.location = 'index_car.html';
                                }, 2000)
                                localStorage.setItem("token", data.token)
                                localStorage.setItem("name", data.rows[0].name);
                            }
                        }
                    });
                },
                settime: function () {
                    var obj = document.getElementById("btn");
                    if (vm.countdown == 0) {
                        obj.removeAttribute("disabled");
                        obj.value = "获取验证码";
                        vm.countdown = 60;
                        return;
                    } else {
                        obj.setAttribute("disabled", true);
                        obj.value = "重新发送(" + vm.countdown + ")";
                        vm.countdown--;
                    }
                    setTimeout(function () {
                        vm.settime(obj)
                    }, 1000)
                },
                getyzm: function (obj) {
                    var act = "";
                    if (!vm.phoneTest.test(vm.phone_number)) {
                        $.toast("请输入正确的手机号");
                        return;
                    }
                    else {
                        act += 'phone_number=' + vm.phone_number;
                    }
                    $.ajax({
                        url: '' + vm.localurl + '/CarUser/GetCode?' + act,
                        data: '',
                        dataType: "json",
                        type: "POST",
                        contentType: "application/json; charset=utf-8",
                        success: function (data) {
                            if (data.err) {
                                $.toast(data.err);
                            }
                            else {
                                vm.settime(obj);
                            }
                        },
                        error: function () {

                        }
                    });
                },
            }
        })
    </script>
</body>
</html>
